<template>
    <el-dialog v-model="dialogVisible" title="请选择区域" width="500px">
        <div class="h-100 overflow-y-auto">
            <el-tree ref="elTreeRef" show-checkbox :data="treeData" :props="defaultProps"></el-tree>
        </div>
        <template #footer>
            <span class="dialog-footer">
                <el-button type="primary" @click="handleSelect">选择</el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script setup>
import { ref } from 'vue'
import { getRegionNodeList } from '@/api/system/region'

const emit = defineEmits(['select'])
const dialogVisible = defineModel()
const treeData = ref([])
const elTreeRef = ref(null)

watch(dialogVisible, (newVal) => {
    if (newVal) {
        getRegionNodeList().then(res => {
            if (res.code === 200) {
                treeData.value = res.data
            }
        })
    }
})

const defaultProps = {
    children: 'children',
    label: 'label'
}
function handleSelect() {
    const selectedNodes = elTreeRef.value.getCheckedNodes(true)
    console.log(selectedNodes)
    if (selectedNodes.length === 0) {
        ElMessage.error('请选择区域')
        return
    }
    emit('select', selectedNodes)
}
onMounted(() => {
    // getRegionNodeList().then(res => {
    //     if (res.code === 200) {
    //         treeData.value = res.data
    //     }
    // })
})
</script>

<style scoped>
/* Add your custom styles here if needed */
</style>
